<template>
    <h1>跨行</h1>
    <div class="容器">
        <div class="项目 tw:row-span-3">01</div>
        <div class="项目 tw:col-span-2">02</div>
        <div class="项目 tw:col-span-2 tw:row-span-2">03</div>
    </div>
    <h1>起止行</h1>
    <div class="容器">
        <div class="项目 tw:row-span-2 tw:row-start-2">01</div>
        <div class="项目 tw:row-span-2 tw:row-end-3">02</div>
        <div class="项目 tw:row-start-1 tw:row-end-4">03</div>
    </div>
</template>

<style scoped>
    @reference '@/tailwind.css';
    .容器 {
        @apply tw:grid tw:grid-flow-col tw:grid-rows-3 tw:gap-4;
    }
    .项目 {
        @apply tw:bg-purple-500 tw:rounded-md;
        @apply tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white;
        @apply tw:flex tw:min-h-24;
    }
</style>